<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true" :padding="5" >
      <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 基本信息
      </b>

      <div>
        <b class="label-left">
          维修进度:
        </b>
        <div style="width: 40%;float: left;color: #ff9900; border: 1px #ECEFF4 solid;line-height: 40px">
          {{bloc.model.state === "0" ? '已取消'
          :bloc.model.state === "1" ||　bloc.model.state === "2"?'处理中'
          :'已完成'}}
        </div>
        <b class="label-left">
          购买日期:
        </b>
        <div class="label-right">
          {{bloc.model.buyTime}}
        </div>
      </div>
      <div>
        <!--        <b class="label-left">-->
        <!--          设备来源:-->
        <!--        </b>-->
        <!--        <div class='label-left1'>-->
        <!--          手动绑定-->
        <!--        </div>-->
        <b class="label-left">
          申请时间:
        </b>
        <div class="label-left1">
          {{bloc.model.applyTime}}
        </div>
        <b class="label-left">
          联系人:
        </b>
        <div class="label-right">
          {{bloc.model.name}}
        </div>
      </div>
      <!--      <div>-->
      <!--&lt;!&ndash;        <b class="label-left">&ndash;&gt;-->
      <!--&lt;!&ndash;          设备分类:&ndash;&gt;-->
      <!--&lt;!&ndash;        </b>&ndash;&gt;-->
      <!--&lt;!&ndash;        <div class='label-left1'>&ndash;&gt;-->
      <!--&lt;!&ndash;          按摩椅&ndash;&gt;-->
      <!--&lt;!&ndash;        </div>&ndash;&gt;-->
      <!--        <b class="label-left">-->
      <!--          联系人:-->
      <!--        </b>-->
      <!--        <div class="label-right">-->
      <!--          {{bloc.model.name}}-->
      <!--        </div>-->
      <!--      </div>-->
      <div>
        <b class="label-left">
          设备型号:
        </b>
        <div class='label-left1'>
          {{bloc.model.PM}}
        </div>
        <b class="label-left">
          联系电话:
        </b>
        <div class="label-right">
          {{bloc.model.phone}}
        </div>
      </div>
      <div>
        <b class="label-left">
          设备序列号:
        </b>
        <div class='label-left1'>
          {{bloc.model.SN}}
        </div>
        <b class="label-left">
          联系地址:
        </b>
        <div class="label-right">
          {{bloc.model.address}}
        </div>
      </div>
      <div>
        <b class="label-left-text">
          申请原因:
        </b>
        <div class="label-right-text">
          <p>{{bloc.model.describe}}</p>
        </div>
      </div>
<!--      <div v-if="bloc.model.state ==='0'">-->
<!--        <b class="label-left-text">-->
<!--          取消原因:-->
<!--        </b>-->
<!--        <div class="label-right-text">-->
<!--          <p>品牌商已取消保养申请</p>-->
<!--        </div>-->
<!--      </div>-->
    </Card>
<!--    <Card :bordered="false" :dis-hover="true" :padding="10" >-->
<!--      <b slot="title" style="color: #666;">-->
<!--        <span-->
<!--          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"-->
<!--          style="font-size: 20px;"-->
<!--        ></span> 维修凭证-->
<!--      </b>-->
<!--      <div style="text-align: left">-->
<!--        <div class="demo-upload-list" v-for="(item, index) in fileList" :key="ind(item,index)" style="left: 0">-->
<!--          <template v-if="item.status1 === 'finished'">-->
<!--            <img :src="item.imageurl">-->
<!--            <div class="demo-upload-list-cover">-->
<!--              <Icon type="ios-eye-outline" @click.native="handleView(item.imageurl)"></Icon>-->
<!--            </div>-->
<!--          </template>-->
<!--          <Upload :action="'null'">-->
<!--            <Modal title="View Image" v-model="visible" :width="wid">-->
<!--              <img :src="imgUrl" v-if="visible">-->
<!--            </Modal>-->
<!--          </Upload>-->
<!--        </div>-->
<!--        <div class="demo-upload-list" v-for="(item, index) in videoList" :key="ind(item,index)" style="left: 0">-->
<!--          <template v-if="item.status1 === 'finished'">-->
<!--            <video-->
<!--              height="300"-->
<!--              width="400"-->
<!--              controls-->
<!--              :src="item.videourl"></video>-->
<!--          </template>-->
<!--        </div>-->
<!--      </div>-->
<!--    </Card>-->

  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {store} from '@/store/Store';
    import {baseUrl} from '@/base/Request';
    import {Route} from 'vue-router';
    import {MaintainBloc} from './DetailBloc';
    import {isEmpty} from '@/base/util/Strings';
    import {AppButton} from '@/type/AppButton';
    import {deepAssign} from "@/base/util/Objects";
    import json = Mocha.reporters.json;

    @Component({
    })

    export default class extends Vue {
        //     disabled: boolean = true
        //
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                vm.bloc.i = vm.idx;
                if (vm.bloc.i){
                    vm.bloc.load(vm.bloc.model.id,vm.bloc.model.aid);
                }else{
                    vm.$Message.error("操作错误");
                }


            });
        }
        get idx() {
            let routeParams = {};
            Object.keys(this.$route.query).forEach(item =>{
                routeParams[item] = this.$route.query[item];
                let json_maintain= JSON.parse(routeParams[item]);
                deepAssign(this.bloc.model,json_maintain);
            });
            return true;
        }

        bloc = new MaintainBloc();
        // get uploadHeaders() {
        //
        //     return {
        //         'Authorization': 'Bearer ' + store.state.auth.accessToken
        //     }
        // };

        // imgUrl = '';
        // wid = 1000;
        // videoUrl = '';
        // visible = false;
        // get fileList() {
        //     return this.bloc.fileList.map(x => {
        //         return  {'name': 'name', 'imageurl': x, 'status1': 'finished'};
        //     });
        // }
        // get videoList() {
        //     return this.bloc.videoList.map(x => {
        //         return  {'name': 'name', 'videourl': x, 'status1': 'finished'};
        //     });
        // }
        // handleView(url) {
        //     let iii = new Image();
        //     iii.src = url;
        //     this.wid  = iii.width + 32;
        //     this.imgUrl = url;
        //     this.visible = true;
        // }
        // ind(item,index){
        //     return index;
        // }

        ruleValidate3: any = {
        };
        //     // $refs!: {
        //     //     save: AppButton
        //     //     formValidate2: HTMLFormElement
        //     // };
        //     // enable = true;
        //     //

        //     //
        // get uploadAction() {
        //     return 'null'
        // }
        // handleFormatError1(file) {
        //     // this.$Notice.warning({
        //     //   title: '文件格式不正确',
        //     //   desc: file.name + '文件格式不正确，请选择格式为 JPG、PNG格式的文件'
        //     // });
        //     this.$Message.error('请选择格式为JPG、PNG、GIF格式的文件')
        // }
        //
        // handleMaxSize1(file) {
        //     this.$Message.error('图片大小不能超过2M')
        // }
        //
        // handleSuccess(res, file) {
        //     this.bloc.model.benefitIcon = res.data[0]
        //     if (this.bloc.fileList.length > 0) {
        //         this.bloc.fileList = []
        //     }
        //     this.bloc.fileList.push(this.bloc.model.benefitIcon)
        // }
        //     // handleCancel() {
        //     //     this.$router.push({path: '/benefits'});
        //     // }
        //

    }
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item-content {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
  }
  /deep/ .ivu-form-item-label {
    padding-top: 0;
  }
  .form-page .ivu-card {
    height: 65%;
  }
  .label-left{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 40px;
  }
  .label-left1{
    width: 40%;float: left; border: 1px #ECEFF4 solid;
    line-height: 40px
  }
  .label-right{
    width: 40%;float: right;border: 1px #ECEFF4 solid;line-height: 40px;
  }
  .label-left-text{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 90px;height: 90px;
  }
  .label-right-text{
    width: 90%;float: right;border: 1px #ECEFF4 solid;height: 90px;
    text-align: left;overflow:auto;display: flex;justify-content: left;
    align-items: center;
  }
  .label-right-text p{
    text-indent: 4em;
    text-align: left;
    display: inline-block;
  }

  .demo-upload-list{
    height:300px;
    width:400px
  }

</style>
